<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/private_chat_new.css?v={:config('other.ui_version')}" media="all">
</head>
<body>

<div class="chat_area">
    <div class="anchor_list">
        <div class="total_title" id="chatTotalArea"><strong>主播列表</strong></div>
        <div class="anchor_chat_list">
            <ul id="privateCahtList">
                <!--<div class="not_wait_chat"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><span>加载中...</span></div>-->
                {empty name='list'}
                <div class="not_wait_chat">暂无待办信息</div>
                {/empty}
                {volist name='list' id='info'}

                <li chat-href="{:url('privatechat/chat_info')}?anchor_id={$info.anchor_id}" data-anchorid="{$info.anchor_id}">
                    {if $info.unread > 0}
                    <span style="width:15px; height:15px;  background-color: #EC6353; padding:2px; position:relative; left:120px; color:white; border-radius: 15px; display: flex; justify-content: center; align-items: center; margin:3px;" >{$info.unread}</span>
                    <span style="position:relative; top: -23px;">{$info.anchor_name}</span>
                    {else}
                    {$info.anchor_name}
                    {/if}
                </li>
                {/volist}
            </ul>
        </div>
    </div>

    <div class="layadmin-pagetabs chattab_pag layui-hide" id="LAY_chat_tabs">
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
            <ul class="layui-tab-title" id="LAY_chat_tabsheader">
                <li lay-id="{:url('privatechat/chat_info_default')}" lay-attr="" class="layui-this layui-hide"><i class="layui-icon layui-icon-home"></i></li>
            </ul>
        </div>
    </div>

    <div class="layui-body chattab_body" id="LAY_chat_body">
        <div class="layadmin-tabsbody-item layui-show">
            <iframe src="{:url('privatechat/chat_info_default')}" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
        , version: "{:config('other.ui_version')}"
    }).extend({
        chatindex: 'lib/chatindex' //主入口模块
    }).use(['chatindex'], function () {
        var $ = layui.$;

        // 获取直播私聊列表
        function getPrivateList() {
            var obj_chat_list = $('#privateCahtList');
            $.ajax({
                url: '{:url("privatechat/index")}',
                type: 'get',
                data: {},
                dataType: 'json',
                success: function (res) {
                    var html = '';
                    // 待办总数
                    $('#chatTotalArea span').text(`${res.count}`)

                    // 获取选中项,更新的时候不要覆盖选中的
                    var select_li = obj_chat_list.find('.active')

                    var chat_list = res.list;
                    if (chat_list.length > 0) {

                        $.each(chat_list, function (i, val) {
                            if (select_li.data('anchorid') != val.anchor_id) {
                                html += `<li chat-href="{:url('privatechat/chat_info')}?anchor_id=${val.anchor_id}" data-anchorid="${val.anchor_id}">`;
                                console.log("val:",val);
                                if(val.unread > 0) {
                                    html += `
                                        <span style="width:15px; height:15px;  background-color: #EC6353; padding:2px; position:relative; left:120px; color:white; border-radius: 15px; display: flex; justify-content: center; align-items: center; margin:3px;" ></span>
                                    `;
                                    html += `
                                    <span style="position:relative; top: -23px;">${val.anchor_id}</span></li>
                                `;
                                } else {
                                    html += `
                                    ${val.anchor_id}</li>
                                    `;
                                }
                                
                            } else {
                                html += `<li chat-href="${select_li.attr('chat-href')}" data-anchorid="${select_li.data('anchorid')}" class="active">${select_li.text()}</li>`;
                            }
                        });
                        obj_chat_list.html(html);

                        // 左侧如果没有选中项，重置一下右侧区域
                        if (obj_chat_list.find('.active').length < 1) {
                            resetIframe();
                        }


                    } else {
                        var html = '<div class="not_wait_chat">暂无待办信息</div>';
                        obj_chat_list.html(html);
                        // 右侧区域也重置
                        resetIframe();
                    }
                }
            });
        }


        // 重置iframe页面
        function resetIframe() {
            let iframe_obj = $('#LAY_chat_body .layadmin-iframe')
            let jump_url = "{:url('privatechat/chat_info_default')}";
            if (iframe_obj.attr('src') != jump_url) {
                iframe_obj.attr('src', jump_url);
            }
        }

        // 5秒更新一次聊天
        setInterval(function () {
            getPrivateList();
        }, 10000);
    });
</script>
</body>
</html>
